<template>
	<el-container>
		<el-aside width="auto">
			<!-- 侧边栏 -->
			<NavSlider></NavSlider>
		</el-aside>
		<el-container>
			<el-header>
				<div style="display: flex">
					<!-- 收缩组件 -->
					<FoldExpandMenu v-model:collapse="collapse"></FoldExpandMenu>
					<!-- 面包屑   -->
					<BreadCrumbCom></BreadCrumbCom>
				</div>
				<!-- 个人中心 -->
				<PersonCenter></PersonCenter>
			</el-header>
			<!-- 多标签页导航 -->
			<TagView></TagView>
			<el-main>
				<!-- 内容区域 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script setup lang="ts">
import { ref, provide,computed,watch } from 'vue'
import NavSlider from '@/components/NavSlider/index.vue'
import FoldExpandMenu from '@/components/FoldExpandMenu/index.vue'
import PersonCenter from '@/components/PersonCenter/index.vue'
import TagView from '@/components/TagView/index.vue'
import { useMenuStore } from '@/stores/modules/menu'
const menuStore = useMenuStore()
const collapse = ref<boolean>(true)
provide('isCollapse', collapse) // 跨组件通讯：侧边栏组件 -> 动态权限菜单组件
watch(()=>menuStore.devicebool,(value)=>{
	collapse.value = value
},{
	immediate:true
})
</script>

<style lang="scss" scoped>
.el-container {
	width: 100%;
	height: 100vh;
	background-color: #fafafa;
	.el-aside {
		background-color: #314157;
		transition: 0.3s;
	}

	.el-header {
		background-color: #fff;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: #e3e3e7 2px solid;
	}
	.el-main {
		padding: 10px; //默认20px
	}
}
</style>
